
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1" />
<title>wind management</title>
<link href="http://i.autocar.com/res/css/admin_style.css?v=1.0.0" rel="stylesheet" />
<script>
//全局变量，是Global Variables不是Gay Video喔
var GV = {
    JS_ROOT : "http://i.autocar.com/res/js/dev/",                                                                                                   //js目录
    JS_VERSION : "1.0.0",                                                                                                       //js版本号
    TOKEN : '2cab5f3a5501cb0b', //token ajax全局
    REGION_CONFIG : {},
    SCHOOL_CONFIG : {},
    URL : {
        LOGIN : '',                                                                                                                 //后台登录地址
        IMAGE_RES: 'http://i.autocar.com/res/images',                                                                                                       //图片目录
        REGION : 'http://i.autocar.com/index.php?m=bbs&c=webData&a=area',                   //地区
        SCHOOL : 'http://i.autocar.com/index.php?m=bbs&c=webData&a=school'              //学校
    }
};
</script>
<script src="http://i.autocar.com/res/js/dev/wind.js?v1.0.0"></script>
<script src="http://i.autocar.com/res/js/dev/jquery.js?v1.0.0"></script>

</head>
<body>
<div class="wrap">

<!-- start -->
    <div class="nav">
        <ul class="cc">
        <li class="current"><a href="http://i.autocar.com/admin.php?m=config&amp;c=watermark">水印设置</a></li>
        <li><a href="http://i.autocar.com/admin.php?m=config&amp;c=watermark&amp;a=set">水印策略</a></li>
        </ul>
    </div>
    <div class="h_a">水印设置</div>
    <form method="post" class="J_ajaxForm" action="http://i.autocar.com/admin.php?m=config&amp;c=watermark&amp;a=dorun" data-role="list">
    <div class="table_full">
        <table width="100%">
            <col class="th" />
            <col width="400" />
            <col />
            <tr>
                <th>图片附件大小控制</th>
                <td>
                    <div class="mb10">宽：<input name="markLimitwidth" type="number" class="input length_2 mr5" value="100">像素</div>
                    <div>高：<input name="markLimitheight" type="number" class="input length_2 mr5"  value="50">像素</div>
                </td>
                <td><div class="fun_tips">对超过设定值的图片附件加水印</div></td>
            </tr>
            <tr>
                <th>水印位置</th>
                <td>
                    <div class="locate">
                        <ul class="cc" id="J_locate_list">
                            <li class=""><a href="" data-value="1">左上</a></li>
                            <li class=""><a href="" data-value="2">中上</a></li>
                            <li class=""><a href="" data-value="3">右上</a></li>
                            <li class=""><a href="" data-value="4">左中</a></li>
                            <li class=""><a href="" data-value="5">中心</a></li>
                            <li class=""><a href="" data-value="6">右中</a></li>
                            <li class=""><a href="" data-value="7">左下</a></li>
                            <li class=""><a href="" data-value="8">中下</a></li>
                            <li class=" current"><a href="" data-value="9">右下</a></li>
                        </ul>
                        <input id="J_locate_input" name="markPosition" type="hidden" value="9">
                    </div>
                </td>
                <td><div class="fun_tips">选择水印在图片中的位置</div></td>
            </tr>
            <tr>
                <th>为GIF图片加水印</th>
                <td>
                    <ul class="switch_list cc">
                        <li><label><input name="markGif" value="1" type="radio" ><span>开启</span></label></li>
                        <li><label><input name="markGif" value="0" type="radio"  checked><span>关闭</span></label></li>
                    </ul>
                </td>
                <td><div class="fun_tips">开启该功能会导致GIF动画失效</div></td>
            </tr>
            <tr>
                <th>水印类型</th>
                <td>
                    <ul class="single_list cc" id="J_watermark_type">
                        <li><label><input data-id="J_watermark_img" name="markType" value="1" type="radio" >图片水印</label></li>
                        <li><label><input data-id="J_watermark_text" name="markType" value="2" type="radio"  checked>文字水印</label></li>
                    </ul>
                </td>
                <td><div class="fun_tips"></div></td>
            </tr>           <tbody id="J_watermark_text" class="J_watermark_tbody" style=""><!-- 文字 -->
                <tr>
                    <th>水印文字</th>
                    <td>
                        <input name="markText" type="text" class="input length_5" value="phpwind">
                    </td>
                    <td><div class="fun_tips">注：如果为中文，先要在src/repository/font目录中添加中文字体，文件名以cn_开头</div></td>
                </tr>
                <tr>
                    <th>水印字体</th>
                    <td>
                        <select name="markFontfamily" class="select_5">                         <option value="en_arial.ttf"  selected>en_arial.ttf</option>                        </select>
                    </td>
                    <td><div class="fun_tips">字体文件存放在src/repository/font下</div></td>
                </tr>
                <tr>
                    <th>水印文字大小</th>
                    <td>
                        <select name="markFontsize" class="select_5">
                            <option value="5"  selected>5</option>
                            <option value="8" >8</option>
                            <option value="10" >10</option>
                            <option value="20" >20</option>
                        </select> 像素
                    </td>
                    <td><div class="fun_tips"></div></td>
                </tr>
                <tr>
                    <th>水印文字颜色</th>
                    <td>
                        <ul class="single_list cc">
                            <li>
                                <span class="color_pick J_color_pick"><em style="background:#000000;"></em></span>
                                <input class="J_hidden_color" name="markFontcolor" type="hidden" value="#000000">
                            </li>
                        </ul>
                    </td>
                    <td><div class="fun_tips"></div></td>
                </tr>

            </tbody>            <tbody id="J_watermark_img" class="J_watermark_tbody" style="display:none"> <!-- 图片 -->
                <tr>
                    <th>水印文件</th>
                    <td>
                        <select name="markFile" class="select_5">                           <option value="mark.gif" >mark.gif</option>                     </select>
                    </td>
                    <td><div class="fun_tips">水印文件存放在src/repository/mark下</div></td>
                </tr>
            </tbody>
                <tr>
                    <th>水印透明度</th>
                    <td>
                        <input name="markTransparency" type="number" class="input length_5" value="90" min="1" max="100" >
                    </td>
                    <td><div class="fun_tips">设置水印图标透明度，数值越大，图标越清晰，值得范围0到100</div></td>
                </tr>
                <tr>
                    <th>图片质量</th>
                    <td>
                        <input name="markQuality" type="number" class="input length_5" value="90" min="1" max="100" >
                    </td>
                    <td><div class="fun_tips">设置添加水印后的图片质量，数值越大，图片越清晰，值得范围0到100</div></td>
                </tr>
                <tr>
                    <th>水印效果预览</th>
                    <td>
                        <input type="button" id="J_img_preview" value="水印效果预览" class="btn" />
                    </td>
                    <td><div class="fun_tips">无需保存即可预览</div></td>
                </tr>
        </table>
    </div>

    <div class="btn_wrap">
        <div class="btn_wrap_pd">
            <button class="btn btn_submit mr10 J_ajax_submit_btn" type="submit">提交</button>
        </div>
    </div>
    <input type='hidden' name='csrf_token' value='2cab5f3a5501cb0b'/></form>

<!--=================结束=================-->
</div>
<script src="http://i.autocar.com/res/js/dev/pages/admin/common/common.js?v1.0.0"></script>
<script>
$(function(){

    //水印位置
    $('#J_locate_list > li > a').click(function(e){
        e.preventDefault();
        var $this = $(this);
        $this.parents('li').addClass('current').siblings('.current').removeClass('current');
        $('#J_locate_input').val($this.data('value'));
    });


    //切换显示水印类型
    $('#J_watermark_type input:radio').on('change', function(){
            $('#'+ $(this).data('id')).show().siblings('tbody.J_watermark_tbody').hide();
    });

    //引入组件
    Wind.use('dialog', 'ajaxForm', function(){

        //水印图片预览
        $('#J_img_preview').click(function(e){
            e.preventDefault();
            var $this = $(this);

            $('form.J_ajaxForm').ajaxSubmit({
                url         : 'http://i.autocar.com/admin.php?m=config&c=watermark&a=view',
                dataType    : 'json',
                success     : function(data, statusText, xhr, $form) {
                    if(data.state === "success") {
                        Wind.dialog.html('<div style="padding:15px;"><img width="700" height="269" style="display:block;" src='+ data.data +' alt="水印效果预览"/></div><div class="pop_bottom tac"><button class="btn J_close" type="button">关闭</button></div>', {

                            onClose : function(){
                                $this.focus();
                            }
                        });
                    }else{
                        Wind.dialog.alert(data.message);
                    }
                }
            });

        });

    });


});
</script>
</body>
</html>